<template>
	<view>
		<view v-if="prop.srcStr || prop.addButton" class="uni-mt-20">
			<!-- <video v-if="videoSrc" :src="videoSrc" autoplay class="video-box"></video> -->
			<scroll-view scroll-x class="width-100">
				<view class="flex_fsc uni-mt-24">
					<view v-if="mediaList.length" class="flex_fsc">
						<view
							v-for="(media, index) in mediaList"
							:key="media"
							@click="previewFile(media)"
							style="position: relative"
						>
							<image v-if="fileType(media)" :src="`${setting.oss_pub_domain}${media}?x-oss-process=video/snapshot,t_1000,ar_auto`" class="item" mode="aspectFill"></image>
							<image v-else :src="setting.oss_pub_domain + media" mode="aspectFill" class="item"></image>
							<image
								v-if="prop.delIcon"
								:src="setting.oss_pub_domain + '/app-img/icon/icon-delete.png'"
								class="delete-icon"
								@click.stop="delItem(index)"
							></image>
						</view>
					</view>
					<!-- <view v-if="prop.addButton" class="item" @click="selectMedia.open()">
						<img :src="setting.oss_pub_domain + '/app-img/icon/icon-camera2.png'" />
					</view> -->
					<view v-if="prop.addButton" class="item add-media" @click="selectMedia.open()">+</view>
				</view>
			</scroll-view>
		</view>
		<selete-media ref="selectMedia" type="img/video" @done="selectDone"></selete-media>
	</view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, watch } from 'vue';
const { proxy: that } = getCurrentInstance();
const prop = defineProps({
	srcStr: String,
	addButton: {
		type: Boolean,
		default: false
	},
	delIcon: {
		type: Boolean,
		default: false
	}
});
// const videoSrc = ref('');
const mediaList = ref(prop.srcStr ? prop.srcStr.split(',') : []);
watch(
	() => prop.srcStr,
	(newValue, oldValue) => {
		mediaList.value = newValue ? newValue.split(',') : [];
	}
);
function fileType(m) {
	const suffix = m.match(/[^.]+$/)[0];
	if (['mp4', 'flv', 'm3u8', 'mov'].includes(suffix)) return 1;
	else return 0;
}

function previewFile(file) {
	if (fileType(file)) {
		uni.navigateTo({
			url:'/pages/scheme/video/video?src='+that.setting.oss_pub_domain + file
		})
	}else {
		const imgList = mediaList.value.filter((item) => !fileType(item));
		uni.previewImage({
			urls: imgList.map((item) => that.setting.oss_pub_domain + item),
			current: imgList.findIndex((item) => item === file)
		});
	}
}

const emits = defineEmits(['change']);
const selectMedia = ref('');
function selectDone(res) {
	mediaList.value.push(res);
	emits('change', mediaList.value.join(','));
}

function delItem(index) {
	mediaList.value.splice(index, 1);
	emits('change', mediaList.value.join(','));
}
</script>
<!-- <script>
export default {
	name: 'ZPreviewMedia'
};
</script> -->
<style lang="scss" scoped>
.item {
	width: 156rpx;
	height: 156rpx;
	flex-shrink: 0;
	margin-right: 24rpx;
	border-radius: 16rpx;
}

.add-media {
	border: 2rpx dashed $uni-text-color-main;
	text-align: center;
	line-height: 156rpx;
	color: $uni-text-color-main;
	font-size: 44rpx;
	box-sizing: border-box;
}

.video-box {
	width: 100%;
	height: 358rpx;
	background: #f5f5f5;
	border-radius: 10rpx;
}

.delete-icon {
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	right: 6rpx;
	top: -15rpx;
}
</style>
